<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./layui/css/layui.css"  media="all">
</head>
<body>
    <div id="app" style="width: 500px;margin: 30px auto;">
        <form class="layui-form" action="">
            <div class="layui-form-item" style="width: 300px;">
              <label class="layui-form-label">乙方姓名</label>
              <div class="layui-input-block" style="width: 100%;">
                <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入乙方姓名" class="layui-input" v-model="name" style="margin-bottom: 20px;">
                <button type="button" class="layui-btn layui-btn-primary" @click="loadImg">生成合同</button>  
                <button type="button" class="layui-btn layui-btn-primary" @click="download">下载合同</button> 
              </div>
            </div>
        </form>
        <div style="border: 1px solid #ccc;width: 500px;">
            <h3 style="margin: 0 auto;width: 100px;">手动签名</h3>
            <canvas id="sign" width="500" height="250">

            </canvas>
        </div>
        <canvas id="canvas" width="500px" height="1000px"></canvas>
    </div>   
</body>
<script src="./jq.js"></script>
<script src="./vue.js"></script>
<script src="./layui/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form'], function(){
      var form = layui.form
    });
</script>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data() {
            return {
                name: ""
            }
        },
        mounted() {
            this.c = document.getElementById("canvas");
            this.ctx =  this.c.getContext("2d")
            
            $(document).ready(()=>{
                let canvas = document.getElementById("sign")
                let context = canvas.getContext("2d")
                this.canvas = canvas
                canvas.addEventListener("touchstart",function(evt){
                    context.fillStyle="rgba(255, 255, 255, 0)";
                    context.fillRect(0,0,500,250);
                    evt.preventDefault();
                    context.beginPath();
                    
                    context.moveTo(evt.touches[0].pageX -canvas.offsetLeft,evt.touches[0].pageY-canvas.offsetTop)
                })
                canvas.addEventListener("touchmove",function(evt){
                    context.lineTo(evt.touches[0].pageX -canvas.offsetLeft,evt.touches[0].pageY-canvas.offsetTop)
                    context.lineWidth = 8;
                    context.stroke();
                })
            })
        },
        methods: {
            loadImg(){
                if(this.name == ""){
                    alert("姓名不能为空")
                    return
                }
                let that = this;
                let img = new Image
                img.src = "./timg.jpg"
                img.onload = function(){
                    that.ctx.drawImage(img,0,0,800,1000,0,0,500,800)
                    that.ctx.font="16px Georgia";
                    that.ctx.fillText("武汉火才契网络科技有限公司",200,215);
                    that.ctx.fillText("湖北省武汉市当代光谷梦工厂5号楼701",200,265);
                    that.ctx.fillText(that.name,200,365);
                    that.ctx.drawImage(that.canvas,0,0,500,250,200,800,150,75)
                }
            },
            saveFile(data, filename){
                var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
                save_link.href = data;
                save_link.download = filename;
            
                var event = document.createEvent('MouseEvents');
                event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                save_link.dispatchEvent(event);
            },
            download(){
                var dataURL = this.c.toDataURL("image/png");
                this.saveFile(dataURL,'火才契服务合同.jpg');
            }
        },
    })
    // ctx.fillStyle="#FF0000";
    // ctx.fillRect(0,0,150,75);
    // console.log()
    
</script>
</html>